document.addEventListener('DOMContentLoaded', async function () {
    // 保证dom内容是加载完了，不等待图片css资源的加载，性能高
    const res = await axios.get('/dashboard')
    console.log(res)
    // 遍历overview的数据,渲染顶部
    for (let key in res.data.overview) {
        document.querySelector(`[name=${key}]`).innerHTML = res.data.overview[key]
    }
    // 渲染折线图 - 全年薪资图
    initYearChart(res.data.year)
    // 渲染饼图 - 班级薪资分布
    initSalaryChart(res.data.salaryData)
    // 渲染班级每组薪资
    initGroupChart(res.data.groupData)
    // 渲染男女薪资
    initSalaryPieChart(res.data.salaryData)
    // 渲染地图
    initMapChart(res.data.provinceData)
})

// 渲染全学科薪资走势
function initYearChart (year) {
    // 初始化echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 准备配置项
    option = {
        // 标题组件
        title: {
          show: true, //标题是否显示
          text: '2021全学科薪资走势', // 文本标题
          textStyle: {
            fontSize: 16 // 字体大小
          },
          left: 15, // 距离左侧距离
          top: 15
        },
        xAxis: {
          type: 'category',
          data: year.map(item => item.month),
          axisLine: { // x轴轴线
            show: true,
            lineStyle: {
              color: '#d1d1d1', // 轴线颜色
              type: 'dashed', // 虚线
            }
          },
          axisLabel: { // x轴刻度
            show: true,
            color: 'gray'
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          splitLine: {
            show: true,
            // 分隔线的样式
            lineStyle: {
              color: '#d1d1d1',
              type: 'dashed'
            }
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis'
        },
        // grid 绘制网格
        grid: {
          left: '10%',
          top: '20%'
        },
        color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#499FEE', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#5D75F0', // 100% 处的颜色
                },
              ],
            },
          ],
          series: [
            {
              data: year.map((item) => item.salary),
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 6,
              },
              symbolSize: 10,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#499FEE',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(255,255,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)',
                  },
                ]),
              },
            },
          ],
      };
    // 基于配置项渲染图表
    myChart.setOption(option)
}

// 渲染班级薪资分布
function initSalaryChart (salaryData) {
    // 初始化echarts实例
    const myChart = echarts.init(document.querySelector('#salary'))
    // 准备配置项
    const option = {
        title: {
            text: '班级薪资分布',
            top: 15,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            bottom: '6%',
            left: 'center',
          },
          color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
          series: [
            {
              name: '班级薪资分布',
              type: 'pie',
              radius: ['50%', '64%'],
              center: ['50%', '45%'],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
                position: 'center',
              },
              labelLine: {
                show: false,
              },
              // data: [
              //   { value: 1048, name: '1万以下' },
              //   { value: 235, name: '1万-1.5万' },
              //   { value: 735, name: '1.5万-2万' },
              //   { value: 580, name: '2万以上' },
              // ],
              data: salaryData.map((item) => {
                return {
                  value: item.g_count + item.b_count,
                  name: item.label,
                }
              }),
            },
          ],
    }
    // 基于配置项渲染图表
    myChart.setOption(option)
}

// 渲染班级每组薪资
function initGroupChart (groupData) {
  // 初始化echarts实例
  const myChart = echarts.init(document.querySelector('#lines'))
  // 准备配置项
  const option = {
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50,
    },
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'ooi'],
      data: groupData[1].map((item) => item.name),
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed',
        },
      },
      axisLabel: {
        color: '#999',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    tooltip: {
      trigger: 'item',
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#34D39A', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
          },
        ],
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#499FEE', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
          },
        ],
      },
    ],
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: groupData[1].map((item) => item.hope_salary),
        type: 'bar',
        name: '期望薪资',
      },
      {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: groupData[1].map((item) => item.salary),
        type: 'bar',
        name: '就业薪资',
      },
    ],
  }
  // 基于配置项渲染图表
  myChart.setOption(option)

// 点击切换
// 1. 利用事件委托，给按钮绑定点击事件
// 2. 先找到 btn-blue类的盒子去掉类，在给当前点击的盒子加上btn-blue类
const btns = document.querySelector('#btns')

btns.addEventListener('click', e => {
 // console.log(e);
 if (e.target.tagName === 'BUTTON') {
  // 找到有 btn-blue类的盒子，去掉类
  btns.querySelector('.btn-blue').classList.remove('btn-blue')
  // 给自己加上,复活自己
  e.target.classList.add('btn-blue')
  // 获取组号
  const group = e.target.innerText
  console.log(groupData)
  // 修改option配置项（修改三个数据配置项）
  option.xAxis.data = groupData[group].map(item => item.name)
  option.series[0].data = groupData[group].map(item => item.hope_salary)
  option.series[1].data = groupData[group].map(item => item.salary)

  // 更新
  myChart.setOption(option)
 }
})
}

// 渲染男女薪资
function initSalaryPieChart (data) {
  // 初始化echarts实例
  const myChart = echarts.init(document.querySelector('#gender'))
  // 准备配置项
  const option = {
    title: [
      {
        text: '男女薪资分布',
        left: 10,
        top: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: '男生',
        left: '50%',
        top: '45%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12,
        },
      },
      {
        text: '女生',
        left: '50%',
        top: '85%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12,
        },
      },
    ],
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: 50,
        radius: ['20%', '30%'],
        center: ['50%', '30%'],
        datasetIndex: 1,
        // data: [{name:'1万以下',value: 4},...]
        data: data.map((item) => ({ name: item.label, value: item.b_count })),
      },
      {
        type: 'pie',
        radius: 50,
        radius: ['20%', '30%'],
        center: ['50%', '70%'],
        datasetIndex: 2,
        // data: [{name:'1万以下',value: 4},...]
        data: data.map((item) => ({ name: item.label, value: item.g_count })),
      },
    ],
  }
  // 基于配置项渲染图表
  myChart.setOption(option)
}

// 渲染地图
const initMapChart = (data) => {
  const myEchart = echarts.init(document.querySelector('#map'))
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
  dataList.forEach((item) => {
    const obj = data.find((it) => it.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') === item.name)
    if (obj) item.value = obj.value
  })
  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
